<template>
<el-form ref="product" :model="product" label-width="80px">
  <el-form-item label="商品名" prop="name">
    <el-input v-model="product.name"></el-input>
  </el-form-item>
  <el-form-item label="主图">
        <el-upload
          class="avatar-uploader"
          action="http://api.cat-shop.penkuoer.com/api/v1/common/file_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
  <el-form-item label="价格" prop="price">
    <el-input v-model="product.price"></el-input>
  </el-form-item>
  <el-form-item label="简介" prop="descriptions">
    <el-input type="textarea" v-model="product.descriptions"></el-input>
  </el-form-item>
  <el-form-item label="库存" prop="quantity">
    <el-input v-model="product.quantity"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">添加</el-button>
    <el-button>重置</el-button>
  </el-form-item>
</el-form>
</template>

<script>
import { userAdd } from '../../api/products'
export default {
 data() {
      return {
        product:{
          name:'',
          coverImg:'',
          price:'',
          descriptions:'',
          quantity:''
        },
      imageUrl: ''
      }
    },
    methods: {
      onSubmit() {
        userAdd(this.product)
        this.$router.push({name:'user'})
      },
      handleAvatarSuccess(res, file) {
      // console.log(res)
      this.product.coverImg = res.info
      this.imageUrl = URL.createObjectURL(file.raw)
    }
    }
}
</script>
<style>
img{
  width: 100px
}
</style>
